<template>
  <view class="search">
    <view class="searchInput">
      <uni-search-bar @confirm="myConfirm" v-model="inputValue" @input="searchVaule" cancelButton="none" :radius="20"></uni-search-bar>
    </view>
    <view class="association" v-if="searchList.length>0">
      <view @click="goGoods(item)" class="association-item" v-for="(item,index) in searchList" :key="index">
        <view class="text">{{item.goods_name}}</view>
        <view>
          <uni-icons type="right" size="18"></uni-icons>
        </view>
      </view>
    </view>
      <view class="history">
        <view class="history-title">
          <text>搜索历史</text>
          <uni-icons @click="del" class="history-icon" type="trash-filled" size="20"></uni-icons>
        </view>
        <view class="history-box">
          <view @click="goList(item)" class="history-box-item" v-for="(item,index) in historyList">
            {{item}}
          </view>
        </view>
      </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timer: null,
        searchList: [],
        inputValue: '',
        historyList:uni.getStorageSync('his')||[]
      };
    },
    methods: {
      // 历史记录跳转
      goList(item){
        uni.navigateTo({
          url:`/pages/list/list?key=${item}`
        })
      },
      // 删除历史记录
      del(){
        uni.removeStorage('his')
        this.historyList = []
        uni.showToast({
          title:'删除成功',
          icon:"success"
          
        })
      },
      myConfirm(e){
        uni.navigateTo({
          url:`/pages/list/list?key=${e.value}`
        })
        this.historyList.unshift(e.value)
        // 去重
        this.historyList = [...new Set(this.historyList)]
        uni.setStorageSync('his',this.historyList)
      },
      goGoods(item) {
        uni.navigateTo({
          url: `/pages/goods_detail/main?goods_id=${item.goods_id}`
        })
      },
      searchVaule(e) {
        clearTimeout(this.timer)
        if (!this.inputValue.trim()) return
        this.timer = setTimeout(() => {
          // console.log('search',e);
          this.getData(e)
        }, 500)
      },
      async getData(e) {
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/search', {
          query: e
        }).catch(err => err)
        if (res.meta.status !== 200) return uni.$showMsg()
        // console.log(res)
        this.searchList = res.message.goods
      }
    },
    onHide() {
      this.inputValue = ""
      this.searchList = []
    }
  }
</script>

<style lang="scss">
  .search {
    .searchInput {
      background-color: #c00000;
      position: sticky;
      top: 0;
      left: 0;
    }

    .association {
      padding: 6px;

      .association-item {
        display: flex;
        justify-content: space-between;
        height: 60rpx;
        line-height: 60rpx;
        border-bottom: 1px solid #ccc;

        .text {
          font-size: 14px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .history{
      font-size: 14px;
      &-title{
        padding: 5px 0;
        margin: 0 5px;
        line-height: 40rpx;
        border-bottom: 1px solid #ccc;
        .history-icon{
          float: right;
        }
      }
      &-box{
        display: flex;
        &-item{  
        padding: 5px 0;
        margin: 0 10px;
        }
      }
    }
  }
</style>
